import { useNavigate } from 'react-router-dom';
import { connect } from 'react-redux';
import actions from '@/store/actions';

const HomeHead = (props) => {
  const navigate = useNavigate();
  const date = new Date(),
    day = date.getDate(),
    month = date.getMonth(),
    range = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
  const { userInfo } = props;

  return (
    <div className="head flex box-sizing">
      <div className="mounth-box box-sizing flex-column text-center">
        <span className="day">{day}</span>
        <span className="mounth">{range[month]}</span>
      </div>
      <div className="title-box flex">
        <h2 className="title bold">知乎日报</h2>
        <img
          onClick={() => navigate('/personal')}
          className="avatar"
          src={
            userInfo?.pic ?? 'https://tse4-mm.cn.bing.net/th/id/OIP-C.maao8hq8Cf4UDcIK_HMMNgAAAA?rs=1&pid=ImgDetMain'
          }
          alt="默认头像"
        />
      </div>
    </div>
  );
};

export default connect((state) => state.base, actions.base)(HomeHead);
